<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键词信息列表</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <style>
        #box {
            width: 800px;
            margin: 50px auto;
            /*color: #e0e0e0;*/
        }

        table {
            height: 20%;
            text-align: center;
            border: 1px solid #cccccc;
        }

        th {
            text-align: center;
        }

        #box p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <table border="1px" class="table">
            <tr>
                <th colspan="5">关键词信息列表</th>
            </tr>

            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>类型</th>
                <th>日期</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>3</td>
                <td>股票</td>
                <td>金融</td>
                <td>2018-11-26</td>
                <td><a href="JavaScript:;">删除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>电影票房</td>
                <td>娱乐</td>
                <td>2018-10-28</td>
                <td><a href="JavaScript:;">删除</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>战斗机</td>
                <td>军事</td>
                <td>2018-11-11</td>
                <td><a href="JavaScript:;">删除</a></td>
            </tr>
        </table>
        <p>
            <button class="btn btn-primary">添加关键词</button>
        </p>
    </div>

<script src="./js/jquery-3.5.1.js"></script>
<script !src="">
    $(function (){
       $("a").click(function (){
           if (confirm("是否删除吗?")){
                $(this).parent().parent().remove();
           }
       });

       $("tr:gt(1):even").css({backgroundColor:"#e0e0e0"})
    });
</script>
</body>
</html>